<template>
	<div style="height: 100%; overflow-y: auto">
		<div style="position: relative; width: 619px; height: 1101.8px; margin: 0 auto" ref="targetRef">
			<img src="/@/assets/lottery/3d_logo2.png" alt="中国福利彩票" class="logo_bk" />
			<div :class="['lottery-container', 'shuangseqiu']">
				<!-- 顶部 logo 区 -->
				<div class="top-logo">
					<img src="/@/assets/lottery/cwlogo.png" alt="中国福利彩票" class="cw-logo" />
				</div>

				<!-- 期号 -->
				<div class="issue">
					<div class="issue_title">
						第<text style="margin-left: 5px; margin-right: 5px">{{ infoData.drawIssue }}</text
						>期
					</div>
					<div class="issue_title">
						<span>开奖日期:</span>
						<text>{{ infoData.drawTime }}</text>
					</div>
				</div>

				<div class="item_big_title">开奖号码</div>

				<!-- 开奖号码区域 -->
				<div class="lottery-box">
					<div class="numbers">
						<span v-for="(item, index) in infoData?.redNum?.split(',')" :key="index">{{ item.replace('0', '') }}</span>
						<span v-for="(item, index) in infoData?.buleNum?.split(',')" :key="index">{{ item.replace('0', '') }}</span>
					</div>
				</div>

				<div class="item_big_title" style="margin-top: 10px">宁夏中奖结果</div>

				<!-- 中奖结果表格 -->
				<div class="prize-result">
					<!-- <h2>中奖结果</h2> -->
					<table style="border-collapse: collapse">
						<thead>
							<tr>
								<th style="width: 100px; font-size: 14px; height: 30px">奖等</th>
								<th style="width: 100px; font-size: 14px">中奖注数</th>
								<th style="width: 110px; font-size: 14px">单注金额（元）</th>
								<td style="width: 120px; font-size: 14px">中奖金额（元）</td>
							</tr>
						</thead>

						<tbody>
							<tr v-for="(item, index) in infoData.winNoticeDetailsVos" :key="index">
								<td class="num_td" :style="{ fontSize: item.gradeName.length > 5 ? '13px' : '14px' }">{{ item.gradeName }}</td>
								<td class="num_td">{{ item.totalNumProvinces }}</td>
								<td class="num_td">{{ formatNumber(item.bonus) }}</td>
								<td class="num_td">{{ formatNumber(item.bonus * item.totalNumProvinces) }}</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="item_big_title">宁夏销售金额</div>
				<!-- 宁夏销售金额 -->
				<div class="next-prize-pool">
					<p class="pool-amount">{{ formatNumber(infoData.totalSalesProvince) }}元</p>
				</div>

				<div class="item_big_title">中奖总金额</div>
				<!-- 宁夏销售金额 -->
				<div class="next-prize-pool">
					<p class="pool-amount">{{ formatNumber(infoData.totalWinProvince) }}元</p>
				</div>

				<div class="item_big_title">奖池金额</div>

				<!-- 下期奖池金额 -->
				<div class="next-prize-pool">
					<!-- <h2>下期一等奖奖池累计金额</h2> -->
					<p class="pool-amount">{{ formatNumber(infoData.balanceMoney) }}元</p>
				</div>

				<div class="item_big_title">兑奖期限</div>

				<!-- 兑奖期限 -->
				<div class="claim-deadline">
					<!-- <h2>兑奖期限</h2> -->
					<p>本期兑奖截止日为{{ infoData.endCashTime }}，</p>
					<p>逾期未兑奖视为弃奖，弃奖奖金纳入彩票公益金。</p>
				</div>

				<!-- <div class="big_footer">宁夏福利彩票发行中心</div> -->
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import html2canvas from 'html2canvas';

const emit = defineEmits(['handleClose']);

const props = defineProps({
	infoData: {
		type: Object,
		default: () => {},
	},
});

function formatNumber(num) {
	// 先除以100
	const result = Number(num);
	// 转换为两位小数的字符串
	const fixed = result.toFixed(2);
	// 判断是否以.00结尾，如果是则返回整数部分，否则返回处理后的值
	return fixed.endsWith('.00') ? fixed.split('.')[0] : Number(fixed).toString();
}

// 引用目标元素
const targetRef = ref(null);

// 截图并下载
const captureAndDownload = async () => {
	if (!targetRef.value) return;

	try {
		// 配置项（重要！）
		const options = {
			scale: 2, // 提高分辨率（默认值为设备像素比）
			useCORS: true, // 允许跨域图片
			backgroundColor: null, // 背景透明（设为 '#fff' 则为白色背景）
			logging: false, // 关闭日志
		};

		// 生成 Canvas
		const canvas = await html2canvas(targetRef.value, options);

		// Canvas 转图片
		const imageUrl = canvas.toDataURL('image/png');

		// 触发下载
		const link = document.createElement('a');
		link.href = imageUrl;
		link.download = `screenshot-${new Date().getTime()}.png`;
		link.click();
	} catch (error) {
		console.error('截图失败:', error);
	}
};

// 页面加载时
onMounted(() => {
	NextLoading.done();
});

defineExpose({
	captureAndDownload,
});
</script>

<style scoped lang="scss">
@import url('../css.scss');

.shuangseqiu {
	// background: url('/@/assets/lottery/3d_logo2.png') no-repeat center top;
}

.qilecai {
	background: url('/@/assets/lottery/qilecai_logo3.png') no-repeat center top;
}

.logo_bk {
	position: absolute;
	top: 0;
	left: 0;
	width: 619px;
	height: 1101.8px;
	z-index: 888;
	margin: 0 auto;
}

.lottery-container {
	position: relative;
	z-index: 999;

	width: 619px;
	height: 1101.8px;
	/* 适配手机端，可按需调整 */
	margin: 0 auto;

	/* 主背景图 */
	background-size: 100% 100%;
	padding: 10px;
	font-family: 'SourceHanSansCN-Heavy';
	color: #333;
	position: relative;
	/* 用于灯笼绝对定位 */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 230px;
}

.header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.logo {
	width: 80px;
	height: auto;
	margin-right: 10px;
}

.ssq-logo {
	width: 60px;
	height: auto;
	margin-left: 10px;
}

.header h1 {
	font-size: 24px;
	color: #c1272d;
}

.lottery-box,
.draw-numbers,
.sales,
.next-prize-pool,
.claim-deadline {
	color: white;
	padding: 5px;
	border-radius: 4px;
	color: #4d3f8e;
}

.lottery-box h2,
.draw-numbers h2,
.sales h2,
.next-prize-pool h2,
.claim-deadline h2 {
	text-align: center;
	// margin-bottom: 10px;
}

.claim-deadline {
	color: #4d3f8e;
	font-size: 14px;
	font-weight: bold;
	line-height: 10px;

	p {
		width: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		margin-bottom: 10px;
		margin-top: 7px;
	}
}

.numbers {
	display: flex;
	justify-content: center;
	gap: 50px;
	text-align: center;
	width: 100%;

	font-size: 55px;
	font-weight: bold;

	span {
		border: 1px solid #7321ff;
		width: 70px;
		height: 80px;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		// transform: scaleY(1.2);
	}
}

.issue {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #c1272d;
	margin-top: 50px;
	margin-bottom: 10px;

	display: flex;
	gap: 30px;
}

.issue_title {
	color: #7321ff;
	font-size: 15px;
	font-weight: bold;
	display: flex;
	align-items: center;

	text {
		color: #4d3f8e;
		font-size: 20px;
		font-weight: 900;
	}
}

.sales-amount {
	margin-top: -10px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #904424;
}

.pool-amount {
	text-align: center;
	font-size: 34px;
	font-weight: bold;
	color: #4d3f8e;
}

.prize-result {
	margin-bottom: 10px;
	margin-top: 7px;
	width: 420px;
}

.prize-result h2 {
	text-align: center;
	font-size: 20px;
	color: #4d3f8e;
	margin-bottom: 10px;
}

.prize-result table {
	width: 100%;
	border-collapse: collapse;
	color: #4d3f8e;
	font-weight: bold;
}

.prize-result th,
.prize-result td {
	padding: 1px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.prize-result th {
	// background-color: #c1272d;
	// color: white;
	color: #4d3f8e;
}

.footer {
	text-align: center;
	margin-top: 20px;
	color: #c1272d;
	font-weight: bold;
}

table,
th,
td {
	border: 1px solid #7321ff;
	/* 表格、表头和单元格的边框 */
	border-collapse: collapse;
	/* 合并边框 */
}

.num_td {
	// display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-weight: 800;
	height: 35px;
}

.item_big_title {
	background-color: #7321ff;
	width: 420px;
	color: white;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	border-start-start-radius: 100px;
	border-start-end-radius: 100px;
	padding: 5px 0;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 3px;
}

.prize_table {
	tr {
		td {
			color: #7321ff;
		}
	}
}

.table_big_title {
	font-size: 17zpx;
	font-weight: bold;
}

.big_footer {
	font-size: 20px;
	font-weight: bold;
	color: #000;
	margin-top: 8px;
}
</style>
